<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 企业控制台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/employer/dashboard.css" rel="stylesheet">
    <style>
        #Achart {
            width: 600px;
            height: 500px;
        }
        #Bchart {
            width: 600px;
            height: 500px;
        }
    </style>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li class="active">
                    <a href="#">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="/company/jobManage">
                        <i class='bx bx-briefcase'></i>
                        <span>职位管理</span>
                    </a>
                </li>
{#                <li>#}
{#                    <a href="candidates.html">#}
{#                        <i class='bx bx-user-pin'></i>#}
{#                        <span>候选人</span>#}
{#                    </a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href="candidates.html">#}
{#                        <i class='bx bx-question'></i>#}
{#                        <span>面试题库</span>#}
{#                    </a>#}
{#                </li>#}
                <li>
                    <a href="/company/companyCenter">
                        <i class='bx bx-cog'></i>
                        <span>企业设置</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="top-bar">

                <div class="user-menu">
                    <img src="{{ url_for('static', filename='applicant_logo/img.png') }}" alt="企业Logo" class="avatar">
                    <div class="dropdown">
                            <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                                {{ company_name }}
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="settings.html"><i class='bx bx-cog'></i> 企业设置</a></li>
                                <li><a class="dropdown-item" href="profile.html"><i class='bx bx-user'></i> 个人信息</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="/logout"><i class='bx bx-log-out'></i> 退出登录</a></li>
                            </ul>
                        </div>
                </div>
            </div>

            <div class="dashboard-content">
                <!-- 数据概览 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class='bx bx-briefcase'></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="job_count">15</h3>
                            <p>发布职位</p>
                        </div>
                    </div>
                                                            <script>
                    fetch('/api/job_count')
                        .then(response => response.json())
                        .then(data => {

                            document.getElementById('job_count').textContent = data.job_count;

                        });
                    </script>

                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class='bx bx-user-plus'></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="pending_num">128</h3>
                            <p>待处理</p>
                        </div>
                    </div>

                    <script>
fetch('/api/pending_numble')
    .then(response => response.json())
    .then(data => {

        document.getElementById('pending_num').textContent = data.pending_count;

    });
</script>


                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class='bx bx-video-recording'></i>
                        </div>
                        <div class="stat-info">
                            <h3>面试评分权重设置</h3>
                            <a href="{{ url_for('company_score_weights') }}" class="btn btn-primary">设置权重</a>
                        </div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="charts-grid">
                    <div class="chart-card">
                        <div class="card-header">
                            <h5>候选人分布</h5>
                        </div>
                        <div class="chart-container">
                            <div id="Achart"></div>

                        </div>
                    </div>

                    <div class="chart-card">
                        <div class="card-header">
                            <h5>岗位分布</h5>
                        </div>
                        <div class="chart-container">
                            <div id="Bchart"></div>
                        </div>
                    </div>
                </div>

                <!-- 最近候选人 -->
                <div class="recent-candidates">
                    <div class="section-header">
                        <h5>最近候选人</h5>
                        <a href="candidates.html" class="btn-link">查看全部</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>应聘职位</th>
                                    <th>面试得分</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>张三</td>
                                    <td>前端开发工程师</td>
                                    <td>
                                        <div class="score">
                                            <span class="score-value">85</span>
                                            <div class="score-bar" style="--score-width: 85%"></div>
                                        </div>
                                    </td>
                                    <td><span class="status completed">已完成</span></td>
                                    <td>
                                        <a href="#" class="btn btn-outline-primary">查看详情</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 评分权重设置卡片 -->
<!--                <div class="col-md-4">-->
<!--                    <div class="card feature-card">-->
<!--                        <div class="card-body">-->
<!--                            <h5 class="card-title">面试评分权重设置</h5>-->
<!--                            <p class="card-text">自定义面试评分维度的权重</p>-->
<!--                            <a href="{{ url_for('company_score_weights') }}" class="btn btn-primary">设置权重</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </main>
    </div>

    <!-- 模态框结构（改写后的 score_weights 内容） -->
<div class="modal fade" id="scoreWeightsModal" tabindex="-1" aria-labelledby="scoreWeightsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="scoreWeightsModalLabel">面试评分权重设置</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <!-- 原 score_weights.html 文件中的样式及内容嵌入到模态框中 -->
        <style>
          :root {
              --primary-color: #4a90e2;
              --error-color: #ff4d4f;
              --success-color: #52c41a;
              --border-radius: 8px;
              --gradient-purple: linear-gradient(135deg, #9c27b0, #673ab7);
          }

          .weight-container {
              max-width: 700px;
              margin: 0 auto;
              padding: 20px;
              background: white;
              border-radius: var(--border-radius);
              box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
          }

          .page-title {
              color: white;
              font-size: 20px;
              font-weight: 600;
              margin-bottom: 15px;
              padding: 12px 20px;
              background: var(--gradient-purple);
              border-radius: var(--border-radius);
              box-shadow: 0 2px 8px rgba(156, 39, 176, 0.2);
          }

          .form-label {
              font-weight: 500;
              color: #4a5568;
              margin-bottom: 4px;
              font-size: 14px;
          }

          .form-control {
              border: 2px solid #e2e8f0;
              border-radius: var(--border-radius);
              padding: 6px 12px;
              height: auto;
              transition: all 0.3s ease;
          }

          .form-control:focus {
              border-color: var(--primary-color);
              box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
          }

          .weight-group {
              position: relative;
              margin-bottom: 12px;
              padding: 12px;
              background: #f8fafc;
              border-radius: var(--border-radius);
              transition: all 0.3s ease;
          }

          .weight-group:hover {
              background: #f1f5f9;
          }

          .weight-icon {
              position: absolute;
              right: 15px;
              top: 50%;
              transform: translateY(-50%);
              color: var(--primary-color);
              font-size: 18px;
              opacity: 0.5;
          }

          .weight-sum {
              margin: 15px 0;
              padding: 12px 20px;
              background: var(--gradient-purple);
              border-radius: var(--border-radius);
              color: white;
              font-weight: 600;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 14px;
              box-shadow: 0 2px 8px rgba(156, 39, 176, 0.2);
          }

          .weight-sum.invalid {
              background: linear-gradient(135deg, #f44336, #e91e63);
              color: white;
          }

          .btn-primary {
              background-color: var(--primary-color);
              border: none;
              padding: 10px 20px;
              border-radius: var(--border-radius);
              font-weight: 600;
              transition: all 0.3s ease;
              margin-top: 10px;
          }

          .btn-primary:hover {
              background-color: #357abd;
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
          }

          @media (max-width: 768px) {
              .weight-container {
                  margin: 0 10px;
                  padding: 15px;
              }
              .weight-group {
                  padding: 10px;
                  margin-bottom: 10px;
              }
          }
        </style>
        <div class="weight-container">
          <h2 class="page-title">面试评分权重设置</h2>
          <form id="weightForm">
              <div class="weight-group">
                  <label for="technical_weight" class="form-label">技术能力权重</label>
                  <input type="number" class="form-control weight-input" id="technical_weight"
                         step="0.01" min="0" max="1" required>
                  <i class='bx bx-code-alt weight-icon'></i>
              </div>
              <div class="weight-group">
                  <label for="learning_weight" class="form-label">学习能力权重</label>
                  <input type="number" class="form-control weight-input" id="learning_weight"
                         step="0.01" min="0" max="1" required>
                  <i class='bx bx-book weight-icon'></i>
              </div>
              <div class="weight-group">
                  <label for="team_weight" class="form-label">团队协作权重</label>
                  <input type="number" class="form-control weight-input" id="team_weight"
                         step="0.01" min="0" max="1" required>
                  <i class='bx bx-group weight-icon'></i>
              </div>
              <div class="weight-group">
                  <label for="problem_solving_weight" class="form-label">问题解决权重</label>
                  <input type="number" class="form-control weight-input" id="problem_solving_weight"
                         step="0.01" min="0" max="1" required>
                  <i class='bx bx-bulb weight-icon'></i>
              </div>
              <div class="weight-group">
                  <label for="communication_weight" class="form-label">沟通表达权重</label>
                  <input type="number" class="form-control weight-input" id="communication_weight"
                         step="0.01" min="0" max="1" required>
                  <i class='bx bx-conversation weight-icon'></i>
              </div>
              <div class="weight-sum">
                  <span>权重总和</span>
                  <span id="weightSum">0</span>
              </div>
              <button type="submit" class="btn btn-primary w-100" id="submitBtn">保存设置</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取当前权重设置
    fetch('/api/score-weights')
        .then(response => response.json())
        .then(data => {
            Object.keys(data).forEach(key => {
                document.getElementById(key).value = data[key];
            });
            updateWeightSum();
        });

    // 监听输入变化，更新总和
    document.querySelectorAll('.weight-input').forEach(input => {
        input.addEventListener('input', updateWeightSum);
    });

    // 提交表单
    document.getElementById('weightForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const weightSum = calculateWeightSum();
        if (Math.abs(weightSum - 1) > 0.001) {
            alert('所有权重之和必须等于1');
            return;
        }

        const data = {};
        document.querySelectorAll('.weight-input').forEach(input => {
            data[input.id] = parseFloat(input.value);
        });

        fetch('/api/score-weights', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            } else {
                alert('权重更新成功！');
            }
        });
    });

    function updateWeightSum() {
        const sum = calculateWeightSum();
        const sumElement = document.getElementById('weightSum');
        sumElement.textContent = sum.toFixed(2);

        const weightSumDiv = document.querySelector('.weight-sum');
        if (Math.abs(sum - 1) > 0.001) {
            weightSumDiv.classList.add('invalid');
        } else {
            weightSumDiv.classList.remove('invalid');
        }
    }

    function calculateWeightSum() {
        let sum = 0;
        document.querySelectorAll('.weight-input').forEach(input => {
            sum += parseFloat(input.value) || 0;
        });
        return sum;
    }
});
</script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!--    <script src="/static/js/employer/dashboard.js"></script>-->
<script>
document.querySelector('.btn.btn-primary').addEventListener('click', function(e) {
    e.preventDefault();
    var scoreWeightsModal = new bootstrap.Modal(document.getElementById('scoreWeightsModal'));
    scoreWeightsModal.show();
});
</script>
<script>
    var Achart = echarts.init(document.getElementById('Achart'));

    fetch('/api/achart-data')
        .then(response => response.json())
        .then(data => {
            var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['0', '0-2年', '3-5年', '5年以上']
            },
            series: [
                {
                    name: '高中',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data['0']
                },
                {
                    name: '专科',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data['1']
                },
                {
                    name: '本科',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data['2']
                },
                {
                    name: '硕士',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data['3']
                },
                {
                    name: '博士',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data['4']
                }
            ]
        };
            Achart.setOption(option);
        });
</script>

<script>
        var Bchart = echarts.init(document.getElementById('Bchart'));
         fetch('/api/job-count-data')
        .then(response => response.json())
        .then(data => {
           var option = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: data
                }
            ]
        };
        Bchart.setOption(option);
        });

    </script>

</body>
</html>